<template>
    <div class="layout space-full">
        <div class="layout-header">vue2.x</div>
        <div class="layout-container">
            <div class="layout-container-aside">
                <slot name="aside"></slot>
            </div>
            <div class="layout-container-body">
                <slot name="content"></slot>
            </div>
        </div>
        <div class="layout-footer">&copy;千千结</div>
    </div>
</template>
<script>
export default {

}
</script>
<style lang="less" scoped>
.set_common(){
    font-weight: bolder;
    font-size: 20px;
    .flex_layout(row,center,center);
    height: @space_10px * 8;
    // background-color: @color_gray_1;
    .set_linear_bg();
    min-height: @space_10px * 8;
    color: @color_green_1;
    text-shadow: 0 0 3px @color_black;
}
.layout{
    display: flex;
    flex-direction: column;
}
.layout-header{
    .set_common();
}
.layout-container{
    flex-grow: 1;
    display: flex;
    height: calc(100% - 160px);
}
.layout-container-aside{
    width: @space_10px * 20;
    min-width: @space_10px * 20;
    height: @space_full;
    background: @color_white;
    border-right: 1px solid @color_gray_3;
    box-sizing: border-box;
}
.layout-container-body{
    flex-grow: 1;
    padding: @space_10px * 3;
    width: calc(100% - 200px);
    height: 100%;
    color: @color_black;
    box-sizing: border-box
}
.layout-footer{
    .set_common();
}
</style>
